<template>
  <view class="page">
    <view class="hy_" @tap="selimage()">
      <view>头像</view>
      <image class="hy_tx_img" :src="hyxx.img"></image>
    </view>
    <view class="hy_">
      <view>昵称</view>
      <view class="hy_xg_">
        <input placeholder="请输入昵称" v-model:value="hyxx.name"/>
        <image class="hy_tztb hy_tztb_" src="/static/pages/img/grzy跳转.png"></image>
      </view>
    </view>
    <view class="hy_">
      <view>手机号</view>
      <view class="hy_text">{{ hyxx.number }}</view>
    </view>
    <view class="hy_">
      <view>生日</view>
      <picker mode="date" start="1950-1-1" end="2050-1-1" :value="hyxx.shengri" fields="day" @change="bindDateChange">
        <view>{{ hyxx.shengri }}</view>
      </picker>
      <image class="hy_tztb" src="/static/pages/img/grzy跳转.png"></image>
    </view>
    <view class="hy_">
      <view>性别</view>
      <radio-group class="item-right radio-group" @change="changeSex">
        <label class="radio" v-for="(item, index) in items" :key="index">
          <radio :value="item.value" :checked="parseInt(item.value)==parseInt(hyxx.sex)"/>
          {{ item.name }}
        </label>
      </radio-group>
    </view>
    <view class="hy_">
      <view>会员等级</view>
      <view class="hy_text">{{ hyxx.hydj }}</view>
    </view>
    <view class="hy_">
      <view>会员卡号</view>
      <view class="hy_text">{{ hyxx.hyID }}</view>
    </view>

    <view class="hy_qy">会员权益：{{ hyqy }}</view>

    <view class="hy_xgxx" @tap="subchange()">
      <view>确认修改</view>
    </view>
  </view>
</template>

<script>
// pages/xiugaixinxi/xiugaixinxi.js
import {settinguser, uploadImg} from "@/common/api";

export default {
  data() {
    return {
      items: [
        {
          value: '1',
          name: '男',
          checked: true
        },
        {
          value: '0',
          name: '女',
          checked: false
        }
      ],

      hyqy: '商品无折扣、包座卡无折扣、桌台时长无折扣、桌台次卡无折扣、桌台消费折扣无折扣',

      hyxx: {
        img: '/static/pages/img/三角形.png',
        name: '微信用户',
        number: '12345678901',
        shengri: '1999-1-1',
        sex: '1',
        hydj: '普通会员',
        hyID: '202404105916001431'
      },

      date: ''
    };
  } /**
   onLoad: function(options) {
   var that = this
   // 接收传递过来的数据
   that.setData({
   hyqy:options.hyqy,
   img: options.img,
   nameInput: options.name,
   number: options.number,
   shengri: options.shengri,
   sex: options.sex,
   hydj: options.hydj,
   hyID: options.hyID
   });
   },
   onLoad: function (options) {
   console.log(options)
   },*/,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      hyxx: {
        img: options.img,
        name: options.name,
        number: options.number,
        shengri: options.shengri,
        sex: options.sex,
        hydj: options.hydj,
        hyID: options.hyID,
      }
    })
    console.log('settinguser', options,this.items[0].value, this.hyxx.sex, parseInt(this.items[1].value) == parseInt(this.hyxx.sex), parseInt(this.items[0].value) == parseInt(this.hyxx.sex));
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 确认修改
    subchange() {
      console.log('subchange值为', this.hyxx);
      settinguser({
        nickname: this.hyxx.name,
        avatar_url: this.hyxx.img,
        sex: this.hyxx.sex,
        both: this.hyxx.shengri
      }, res => {
        if (res.data.code == 0) {
          uni.showModal({
            title: res.data.msg,
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          })
        }
      })
    },
    // 选择图片
    selimage() {
      let _this = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          uploadImg(res.tempFilePaths[0], upres => {
            let daobj = JSON.parse(upres.data)
            console.log('uploadImg', upres.data,daobj.data.url)
            _this.hyxx.img=daobj.data.url

          })
        }
      });
    },
    // 生日修改
    bindDateChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      this.hyxx.shengri = e.detail.value
      this.setData({
        date: e.detail.value
      });
    },
    // 性别修改
    changeSex(e) {
      this.hyxx.sex = e.detail.value
      console.log('占位：函数 changeSex 未声明', e);
    }
  }
};
</script>
<style>
.page {
  background-color: rgb(238, 237, 237, 0.5);
  height: 100vh;
}

.hy_ {
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  padding: 40rpx 60rpx 40rpx 60rpx;
  background-color: rgb(255, 255, 255);
  align-items: center; /* 垂直居中 */
  border-bottom: 6rpx solid rgb(238, 237, 237, 0.5);
}

.hy_tx_img {
  width: 80rpx;
  height: 80rpx;
  background-color: aqua;
}

.hy_text {
  font-size: 32rpx;
  color: rgb(92, 92, 92);
}

.hy_qy {
  font-size: 23rpx;
  color: rgb(92, 92, 92);
  margin: 40rpx 40rpx 40rpx 40rpx;
}

.hy_xgxx {
  background-color: rgb(70, 69, 69);
  height: 100rpx;
  margin: 40rpx 40rpx 40rpx 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255);
  border-radius: 5px; /* 圆角设置为20px */
}

.hy_tztb {
  width: 40rpx;
  height: 40rpx;
}

.hy_xg_ {
  display: flex;
}

/* 自定义 radio 样式 */
radio {
  width: 38rpx;
}

radio .wx-radio-input {
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
}

/* 选中后的样式 （可根据设计稿需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%;
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  font-size: 26rpx; /* 对勾大小 26rpx */
  color: #fff; /* 对勾颜色 */
  background: #2facff;
  border-color: #2facff;
}
</style>
